<template>
  <div>
    <FormContainer :column="3">
      <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
        <el-form-item prop="projectName" label="项目名称">
          <el-input v-model="formData.projectName" placeholder="请输入项目名称" clearable></el-input>
        </el-form-item>
        <el-form-item prop="isEnableAppeal" label="是否能申诉">
          <el-select v-model="formData.isEnableAppeal" placeholder="请选择" clearable filterable>
            <el-option v-for="(s,i) in appealList" :key="i" :value="s.dictCode" :label="s.dictName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="formData.isEnableAppeal==='1'" prop="appealTerm" label="申诉时效">
          <el-input v-model="formData.appealTerm" v-number-input placeholder="请输入申诉时效" clearable>
            <span slot="suffix">天</span>
          </el-input>
        </el-form-item>
        <el-form-item prop="questionnaireId" label="质检评分表">
          <QuestionnaireSelect v-model="formData.questionnaireId"></QuestionnaireSelect>
        </el-form-item>
        <el-form-item prop="cycle" label="执行周期">
          <el-date-picker v-model="formData.cycle" operator="<" :limite="new Date()" type="daterange" format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间" range-separator="-" clearable></el-date-picker>
        </el-form-item>
      </el-form>
    </FormContainer>
    <ButtonGroup :button="['save', 'next']" @next="nextHandle" @save="saveHandle"></ButtonGroup>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import QuestionnaireSelect from './questionnaireSelect'
import ButtonGroup from './buttonGroup'
import { deepCopy, parseTime, numToString } from '@/utils'
import { qualityCheckProjectSave } from '@/api/inspection'
export default {
  name: 'BaseInfo',
  components: {
    FormContainer,
    QuestionnaireSelect,
    ButtonGroup
  },
  props: {
    stepData: {
      type: Object,
      default: () => ({})
    },
    next: {
      type: String,
      default: undefined
    },
    prev: {
      type: String,
      default: undefined
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validatorCycle = (r, v, c) => {
      if (v && v.length === 2) {
        c()
      } else {
        c(new Error('请选择执行周期'))
      }
    }
    return {
      formData: {
        projectName: '',
        isEnableAppeal: '',
        appealTerm: '',
        questionnaireId: '',
        cycle: [],
        beginDate: '',
        endData: ''
      },
      formRules: {
        projectName: [{ required: true, message: '请输入项目名称', trigger: 'change' }],
        isEnableAppeal: [{ required: true, message: '请选择', trigger: 'change' }],
        appealTerm: [{ required: true, message: '请输入申诉时效', trigger: 'change' }],
        questionnaireId: [{ required: true, message: '请选择质检评分表', trigger: 'change' }],
        cycle: [{ required: true, type: 'array', validator: validatorCycle, trigger: 'change' }]
      },
      appealList: [
        { dictCode: '1', dictName: '能' },
        { dictCode: '0', dictName: '不能' }
      ]
    }
  },
  computed: {
    prevEnable() {
      return this.stepData.id
    }
  },
  watch: {
    stepData: {
      handler(n) {
        if (Object.keys(n).length > 0) {
          this.initFormData()
        }
      },
      immediate: true
    }
  },
  methods: {
    initFormData() {
      // eslint-disable-next-line prefer-const
      for (let [k, v] of Object.entries(this.stepData)) {
        if (!Object.prototype.hasOwnProperty.call(this.formData, k)) {
          continue
        }
        if (this.$validateNone(v)) continue
        v = numToString(v)
        this.$set(this.formData, k, v)
      }
      if (this.stepData.beginDate && this.stepData.endDate) {
        this.$set(this.formData, 'cycle', [this.stepData.beginDate, this.stepData.endDate])
      }
    },
    genData() {
      const data = deepCopy(this.formData)
      if (data.cycle && data.cycle.length === 2) {
        data.beginDate = parseTime(data.cycle[0], '{y}-{m}-{d}')
        data.endDate = parseTime(data.cycle[1], '{y}-{m}-{d}')
      }
      delete data.cycle
      return data
    },
    saveHandle() {
      return this.$refs.form.validate().then(() => {
        const data = this.genData()
        return qualityCheckProjectSave(data).then(res => {
          this.$message.success('保存成功！')
          this.$emit('on-refresh', res.data.id)
        })
      })
    },
    nextHandle() {
      if (this.prevEnable) {
        this.$emit('input', this.next)
      } else {
        this.$message.warning('请先保存！')
      }
    }
  }
}
</script>
